<template>
  <div class="cars">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <div class="container">
        <div class="filter-header">
          <h1 class="page-title">汽车浏览</h1>
          <p class="page-subtitle">探索丰富的汽车世界，找到最适合您的座驾</p>
        </div>
        
        <!-- 筛选条件区域 -->
        <div class="filter-panel">
          <!-- 关键词搜索 -->
          <div class="search-row">
            <div class="search-container">
              <div class="search-input-wrapper">
                <input 
                  v-model="filters.keyword" 
                  @input="handleSearchInput" 
                  @keyup.enter="applyFilters"
                  type="text" 
                  placeholder="搜索车型名称、品牌或系列..." 
                  class="search-input"
                >
                <img src="/images/search.png" alt="搜索" class="search-icon">
              </div>
            </div>
          </div>
          
          <div class="filter-row">
            <!-- 品牌筛选 - 字母索引分栏布局 -->
            <div class="filter-item brand-filter-item">
              <label class="filter-label">品牌</label>
              <div class="brand-selector-wrapper">
                <div class="brand-selector" @click="toggleBrandSelector">
                  <span class="selected-brand">
                    {{ selectedBrandName || '请选择品牌' }}
                  </span>
                  <span class="dropdown-arrow">▼</span>
                </div>
                
                <!-- 品牌选择弹窗 -->
                <div v-if="showBrandSelector" class="brand-selector-modal" @click.self="closeBrandSelector">
                  <div class="brand-selector-content">
                    <!-- 优化头部 -->
                    <div class="brand-selector-header">
                      <h3 class="header-title">选择品牌</h3>
                      <button @click="closeBrandSelector" class="close-btn">×</button>
                    </div>
                    
                    <!-- 主体内容区域 - 恢复左右分栏布局 -->
                    <div class="brand-selector-body">
                      <!-- 左侧字母索引导航 -->
                      <div class="brand-index" ref="brandIndex">
                        <div 
                          v-for="letter in brandIndexLetters" 
                          :key="letter"
                          :class="['index-letter', { active: activeIndex === letter }]"
                          @click="scrollToLetter(letter)"
                        >
                          {{ letter }}
                        </div>
                      </div>
                      
                      <!-- 右侧品牌列表 -->
                        <div class="brand-list-container" ref="brandListContainer">
                          <!-- 字母分组品牌区域 -->
                          <div 
                            v-for="(brandsByLetter, letter) in brandsByIndex" 
                            :key="letter"
                            class="brand-letter-section"
                            :id="`brand-${letter}`"
                          >
                          <h4 class="letter-title">{{ letter }}</h4>
                          <div class="brand-grid">
                            <div 
                              v-for="brand in brandsByLetter" 
                              :key="brand.brand_id"
                              :class="['brand-item', { active: filters.brand_id === brand.brand_id }]"
                              @click="selectBrand(brand)"
                            >
                              {{ brand.brand_name }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 底部操作区域 -->
                    <div class="brand-selector-footer">
                      <div class="selected-info" v-if="selectedBrandName">
                        已选择: <strong>{{ selectedBrandName }}</strong>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 价格区间筛选 -->
            <div class="filter-item">
              <CommonSelector 
                v-model="filters.price_range"
                label="价格区间（万元）"
                placeholder="全部价格"
                :options="priceRanges"
                @change="handleFilterChange"
              />
            </div>
            
            <!-- 能源类型筛选 -->
            <CommonSelector 
              v-model="filters.energy_type"
              label="能源类型"
              placeholder="全部类型"
              :options="energyTypes"
              @change="handleFilterChange"
            />
          </div>
          
          <div class="filter-row">
            <!-- 车辆级别筛选 -->
            <div class="filter-item">
              <CommonSelector 
                v-model="filters.level"
                label="车辆级别"
                placeholder="全部级别"
                :options="carLevels"
                @change="handleFilterChange"
              />
            </div>
            
            <!-- 上市日期筛选 -->
            <div class="filter-item">
              <label class="filter-label">上市日期</label>
              <div class="date-range">
                <input 
                  v-model="filters.start_date" 
                  type="month" 
                  @change="handleFilterChange" 
                  class="date-input"
                  placeholder="开始日期"
                >
                <span class="range-separator">至</span>
                <input 
                  v-model="filters.end_date" 
                  type="month" 
                  @change="handleFilterChange" 
                  class="date-input"
                  placeholder="结束日期"
                >
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="filter-actions">
              <button @click="resetFilters" class="reset-btn">重置筛选</button>
              <button @click="applyFilters" class="apply-btn">应用筛选</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆展示区域 -->
    <div class="cars-section">
      <div class="container">
        <!-- 结果统计、排序和分页控制 -->
        <div class="results-header">
          <div class="results-info">
            <span class="total-count">共找到 {{ totalCars }} 款车型</span>
            <div class="active-filters" v-if="hasActiveFilters">
              <span class="filter-badge" v-for="filter in activeFilters" :key="filter.key">
                {{ filter.label }}: {{ filter.value }}
                <span @click="removeFilter(filter.key)" class="remove-filter">×</span>
              </span>
            </div>
          </div>
          
          <!-- 排序功能区域 -->
          <div class="sort-controls">
            <div class="sort-group">
              <label class="sort-label">价格排序：</label>
              <select 
                v-model="sortOptions.price" 
                @change="handleSortChange('price')"
                class="sort-select"
              >
                <option value="">默认</option>
                <option value="asc">升序</option>
                <option value="desc">降序</option>
              </select>
            </div>
            
            <div class="sort-group">
              <label class="sort-label">日期排序：</label>
              <select 
                v-model="sortOptions.launch_date" 
                @change="handleSortChange('launch_date')"
                class="sort-select"
              >
                <option value="">默认</option>
                <option value="asc">升序</option>
                <option value="desc">降序</option>
              </select>
            </div>
          </div>
          
          <div class="page-controls">
            <div class="per-page-selector">
              <label>每页显示：</label>
              <select v-model="pagination.per_page" @change="handlePerPageChange" class="per-page-select">
                <option value="10">10条</option>
                <option value="20">20条</option>
                <option value="30">30条</option>
                <option value="50">50条</option>
              </select>
            </div>
          </div>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        
        <!-- 车辆列表 -->
        <div v-else class="cars-list">
          <div class="table-header">
            <div class="table-row header-row">
              <div class="table-cell brand-cell">品牌</div>
              <div class="table-cell model-cell">车型</div>
              <div class="table-cell series-cell">系列</div>
              <div class="table-cell price-cell">价格</div>
              <div class="table-cell energy-cell">能源类型</div>
              <div class="table-cell level-cell">级别</div>
              <div class="table-cell date-cell">上市日期</div>
            </div>
          </div>
          
          <div class="table-body">
            <div 
              v-for="car in cars" 
              :key="car.id"
              class="table-row data-row"
              data-label="车型信息"
              @click="showCarDetails(car)"
            >
              <div class="table-cell brand-cell" data-label="品牌">
                <span class="brand-name">{{ car.brand_name }}</span>
              </div>
              <div class="table-cell model-cell" data-label="车型">
                <span class="model-name">{{ car.model_name }}</span>
              </div>
              <div class="table-cell series-cell" data-label="系列">
                <span class="series-name">{{ car.series_name }}</span>
              </div>
              <div class="table-cell price-cell" data-label="价格">
                <span class="price" v-if="car.model_price">¥{{ car.model_price }}万</span>
                <span class="price-unknown" v-else>价格待定</span>
              </div>
              <div class="table-cell energy-cell" data-label="能源类型">
                <span class="energy-type">{{ car.energy_type }}</span>
              </div>
              <div class="table-cell level-cell" data-label="级别">
                <span class="car-level">{{ car.level }}</span>
              </div>
              <div class="table-cell date-cell" data-label="上市日期">
                <span class="launch-date" v-if="car.launch_date">{{ car.launch_date }}</span>
                <span class="date-unknown" v-else>未公布</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无数据提示 -->
        <div v-if="!loading && cars.length === 0" class="no-data">
          <div class="no-data-icon">🚗</div>
          <h3>暂无符合条件的车型</h3>
          <p>请尝试调整筛选条件或重置筛选</p>
        </div>
        
        <!-- 分页控制 -->
        <div v-if="!loading && cars.length > 0" class="pagination-section">
          <div class="pagination">
            <button 
              @click="goToPage(pagination.current_page - 1)" 
              :disabled="pagination.current_page <= 1"
              class="pagination-btn prev-btn"
            >
              上一页
            </button>
            
            <div class="page-numbers">
              <button 
                v-for="page in visiblePages" 
                :key="page"
                @click="goToPage(page)"
                :class="['page-btn', { active: page === pagination.current_page }]"
              >
                {{ page }}
              </button>
              <span v-if="showEllipsis" class="ellipsis">...</span>
            </div>
            
            <button 
              @click="goToPage(pagination.current_page + 1)" 
              :disabled="pagination.current_page >= pagination.total_pages"
              class="pagination-btn next-btn"
            >
              下一页
            </button>
            
            <div class="page-jump">
              <span class="page-info">第 {{ pagination.current_page }} / {{ pagination.total_pages }} 页</span>
              <div class="page-input-group">
                <input 
                  type="number" 
                  v-model.number="pageInput"
                  :min="1"
                  :max="pagination.total_pages"
                  placeholder="输入页码"
                  class="page-input"
                  @keyup.enter="jumpToPage"
                />
                <button 
                  @click="jumpToPage"
                  class="jump-btn"
                  :disabled="!isValidPage(pageInput)"
                >
                  跳转
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    
    <!-- 车型详情弹窗 -->
    <div v-if="showCarDetail" class="car-detail-modal" @click="handleModalClick">
      <div class="car-detail-content">
        <!-- 弹窗头部 -->
        <div class="car-detail-header">
          <div class="car-title-container">
            <h2 class="car-model">{{ selectedCar?.model_name || '车型详情' }}</h2>
          </div>
          <button class="close-modal-btn" @click="closeCarDetail">×</button>
        </div>
        
        <!-- 弹窗主体内容 -->
        <div class="car-detail-body" v-if="selectedCar">
          <!-- 基本信息卡片 -->
          <div class="detail-card">
            <h4 class="card-title">基本信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">厂商</span>
                <span class="info-value">{{ selectedCar.manufacturer || '未提供' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">价格</span>
                <span class="info-value price">{{ selectedCar.model_price ? '¥' + selectedCar.model_price + '万' : '价格待定' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">级别</span>
                <span class="info-value">{{ selectedCar.level || '未提供' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">能源类型</span>
                <span class="info-value">{{ selectedCar.energy_type || '未提供' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">上市日期</span>
                <span class="info-value">{{ selectedCar.launch_date || '未公布' }}</span>
              </div>
            </div>
          </div>
          
          <!-- 车辆参数卡片 -->
          <div class="detail-card">
            <h4 class="card-title">车辆参数</h4>
            <div class="config-content">
              <div v-if="selectedCar.config && parsedConfig.length > 0" class="parsed-config-data">
                <!-- 按类别分组显示参数 -->
                <div class="config-section" v-for="(group, groupName) in groupedConfig" :key="groupName">
                  <h5 class="config-section-title">{{ groupName }}</h5>
                  <div class="config-grid">
                    <div 
                      v-for="(item, index) in group" 
                      :key="index" 
                      class="config-item"
                    >
                      <span class="config-label">{{ item.label }}</span>
                      <span class="config-value">{{ item.value }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="no-config">
                <p>暂无详细参数信息</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载状态 -->
        <div v-else class="loading-container">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        
        <!-- 弹窗底部按钮 -->
        <div class="car-detail-footer">
          <button class="close-detail-btn" @click="closeCarDetail">关闭</button>
        </div>
      </div>
    </div>
</template>

<script>
import { carApiService } from '../api/car.js'
import CommonSelector from '../components/CommonSelector.vue'

export default {
  name: 'Cars',
  components: {
    CommonSelector
  },
  data() {
    return {
      cars: [],
      brands: [],
      loading: false,
      totalCars: 0,
      showBrandSelector: false,
      activeIndex: 'A',
      // 滚动联动相关属性
      isProgrammaticScroll: false,
      // 品牌选择状态管理
      _tempBrandId: '',
      _selectedBrandDuringSession: false,
      // 页码输入
      pageInput: 1,
      // 车型详情弹窗相关
      showCarDetail: false,
      selectedCar: null,
      // 排序相关数据
      sortOptions: {
        price: '', // 'asc' 或 'desc'
        launch_date: '' // 'asc' 或 'desc'
      },
      filters: {
        keyword: '',
        brand_id: '',
        price_range: '',
        energy_type: '',
        level: '',
        start_date: '',
        end_date: ''
      },
      pagination: {
        current_page: 1,
        per_page: 10,
        total_pages: 0
      },
      // 筛选选项数据
      priceRanges: [
        { value: 'under_5', label: '5万以下', min: 0, max: 5 },
        { value: '5_10', label: '5-10万', min: 5, max: 10 },
        { value: '10_15', label: '10-15万', min: 10, max: 15 },
        { value: '15_20', label: '15-20万', min: 15, max: 20 },
        { value: '20_30', label: '20-30万', min: 20, max: 30 },
        { value: '30_50', label: '30-50万', min: 30, max: 50 },
        { value: 'above_50', label: '50万以上', min: 50, max: null }
      ],
      // 热门品牌数据
      popularBrands: [
        { brand_id: 1, brand_name: '大众' },
        { brand_id: 2, brand_name: '丰田' },
        { brand_id: 3, brand_name: '本田' },
        { brand_id: 4, brand_name: '宝马' },
        { brand_id: 5, brand_name: '奔驰' },
        { brand_id: 6, brand_name: '奥迪' }
      ],
      energyTypes: [
        '汽油', '48V轻混系统', '油电混动', '纯电动', '汽油电驱', 
        '增程式电动', '插电混动', '柴油'
      ],
      carLevels: [
        '中大型MPV', '中大型SUV', '中型SUV', '中型皮卡',
        '全尺寸皮卡', '大型SUV', '紧凑型SUV', '紧凑型车', '微卡',
        '微型车', '微面', '房车', '轻客', '跑车'
      ].sort()
    }
  },
  computed: {
    visiblePages() {
      const current = this.pagination.current_page
      const total = this.pagination.total_pages
      const pages = []
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
        } else if (current >= total - 3) {
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          for (let i = current - 2; i <= current + 2; i++) {
            pages.push(i)
          }
        }
      }
      return pages
    },
    showEllipsis() {
      return this.pagination.total_pages > 7 && 
             this.pagination.current_page < this.pagination.total_pages - 3
    },
    
    hasActiveFilters() {
      return Object.values(this.filters).some(value => 
        value !== '' && value !== null && value !== undefined
      )
    },
    
    activeFilters() {
      const filters = []
      
      if (this.filters.keyword) {
        filters.push({ key: 'keyword', label: '关键词', value: this.filters.keyword })
      }
      
      if (this.filters.brand_id) {
        const brand = this.brands.find(b => b.brand_id === this.filters.brand_id)
        if (brand) {
          filters.push({ key: 'brand_id', label: '品牌', value: brand.brand_name })
        }
      }
      
      if (this.filters.price_range) {
        const selectedRange = this.priceRanges.find(range => range.value === this.filters.price_range)
        if (selectedRange) {
          filters.push({ key: 'price_range', label: '价格', value: selectedRange.label })
        }
      }
      
      if (this.filters.energy_type) {
        filters.push({ key: 'energy_type', label: '能源类型', value: this.filters.energy_type })
      }
      
      if (this.filters.level) {
        filters.push({ key: 'level', label: '级别', value: this.filters.level })
      }
      
      if (this.filters.start_date || this.filters.end_date) {
        let dateText = ''
        if (this.filters.start_date && this.filters.end_date) {
          dateText = `${this.filters.start_date}至${this.filters.end_date}`
        } else if (this.filters.start_date) {
          dateText = `≥${this.filters.start_date}`
        } else if (this.filters.end_date) {
          dateText = `≤${this.filters.end_date}`
        }
        filters.push({ key: 'date', label: '上市日期', value: dateText })
      }
      
      return filters
    },
    
    // 品牌索引相关计算属性
    selectedBrandName() {
      if (!this.filters.brand_id) return ''
      const brand = this.brands.find(b => b.brand_id === this.filters.brand_id)
      return brand ? brand.brand_name : ''
    },
    
    // 获取品牌首字母（支持中文拼音，仅包含A-Z和"其他"）
    brandIndexLetters() {
      const letters = new Set()
      
      // 预定义A-Z字母
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
      alphabet.forEach(letter => letters.add(letter))
      
      // 添加"其他"类别
      letters.add('其他')
      
      return Array.from(letters).sort()
    },
    
    // 按字母索引分组的品牌数据
    brandsByIndex() {
      const grouped = {}
      
      // 初始化所有字母和"其他"的分组
      this.brandIndexLetters.forEach(letter => {
        grouped[letter] = []
      })
      
      this.brands.forEach(brand => {
        const firstChar = brand.brand_name.charAt(0)
        let letter
        
        // 判断字符类型
        if (/[\u4e00-\u9fa5]/.test(firstChar)) {
          // 中文字符：获取拼音首字母
          letter = this.getPinyinFirstLetter(firstChar).toUpperCase()
        } else if (/[A-Za-z]/.test(firstChar)) {
          // 英文字符：直接取首字母
          letter = firstChar.toUpperCase()
        } else {
          // 其他字符（数字、特殊字符等）：归类到"其他"
          letter = '其他'
        }
        
        if (grouped[letter]) {
          grouped[letter].push(brand)
        }
      })
      
      // 对每个字母下的品牌按指定规则排序
      Object.keys(grouped).forEach(letter => {
        grouped[letter].sort((a, b) => {
          const nameA = a.brand_name
          const nameB = b.brand_name
          
          // 判断品牌名称类型
          const isEnglishOnlyA = /^[A-Za-z\s]+$/.test(nameA)
          const isEnglishOnlyB = /^[A-Za-z\s]+$/.test(nameB)
          const hasChineseA = /[\u4e00-\u9fa5]/.test(nameA)
          const hasChineseB = /[\u4e00-\u9fa5]/.test(nameB)
          
          // 纯英文品牌名排在最前面
          if (isEnglishOnlyA && !isEnglishOnlyB) return -1
          if (!isEnglishOnlyA && isEnglishOnlyB) return 1
          
          // 中英混合的品牌名排在中间
          const isMixedA = !isEnglishOnlyA && hasChineseA
          const isMixedB = !isEnglishOnlyB && hasChineseB
          if (isMixedA && !isMixedB) return -1
          if (!isMixedA && isMixedB) return 1
          
          // 纯中文的品牌名排在最后
          const isChineseOnlyA = hasChineseA && !/[A-Za-z]/.test(nameA)
          const isChineseOnlyB = hasChineseB && !/[A-Za-z]/.test(nameB)
          if (isChineseOnlyA && !isChineseOnlyB) return 1
          if (!isChineseOnlyA && isChineseOnlyB) return -1
          
          // 在同一分类内按名称升序排列
          return nameA.localeCompare(nameB)
        })
      })
      
      return grouped
    },
    
    // 解析车辆配置信息
    parsedConfig() {
      if (!this.selectedCar || !this.selectedCar.config) return [];
      
      try {
        // 尝试解析JSON格式的配置信息
        const config = typeof this.selectedCar.config === 'string' 
          ? JSON.parse(this.selectedCar.config) 
          : this.selectedCar.config;
        
        // 定义参数分类和排序规则
        const priorityOrder = [
          // 核心性能参数
          '发动机型号', '排量(L)', '最大马力(Ps)', '最大功率(kW)', '最大扭矩(N·m)',
          // 变速箱和驱动
          '变速箱类型', '驱动方式',
          // 车身尺寸
          '长(mm)', '宽(mm)', '高(mm)', '轴距(mm)',
          // 车身结构
          '车身结构',
          // 其他参数
        ];
        
        // 将配置对象转换为数组格式便于展示
        const configArray = [];
        for (const [key, value] of Object.entries(config)) {
          // 过滤掉空值和暂无数据的字段
          if (value !== null && value !== undefined && value !== '' && value !== '暂无数据') {
            configArray.push({
              label: key,
              value: String(value)
            });
          }
        }
        
        // 按照优先级排序
        configArray.sort((a, b) => {
          const indexA = priorityOrder.indexOf(a.label);
          const indexB = priorityOrder.indexOf(b.label);
          
          // 如果都在优先级列表中，按优先级排序
          if (indexA !== -1 && indexB !== -1) {
            return indexA - indexB;
          }
          
          // 优先级高的排在前面
          if (indexA !== -1) return -1;
          if (indexB !== -1) return 1;
          
          // 都不在优先级列表中，按字母顺序排序
          return a.label.localeCompare(b.label);
        });
        
        return configArray;
      } catch (error) {
        console.warn('解析车辆配置信息失败:', error);
        return [];
      }
    },
    
    // 按类别分组的配置信息
    groupedConfig() {
      if (!this.parsedConfig || this.parsedConfig.length === 0) return {};
      
      // 定义参数分组规则
      const groups = {
        '核心性能': ['发动机型号', '排量(L)', '最大马力(Ps)', '最大功率(kW)', '最大扭矩(N·m)'],
        '传动系统': ['变速箱类型', '驱动方式'],
        '车身尺寸': ['长(mm)', '宽(mm)', '高(mm)', '轴距(mm)'],
        '其他参数': ['车身结构']
      };
      
      // 初始化分组结果
      const grouped = {};
      Object.keys(groups).forEach(groupName => {
        grouped[groupName] = [];
      });
      
      // 将参数分配到对应分组
      this.parsedConfig.forEach(item => {
        let assigned = false;
        for (const [groupName, keys] of Object.entries(groups)) {
          if (keys.includes(item.label)) {
            grouped[groupName].push(item);
            assigned = true;
            break;
          }
        }
        
        // 未匹配到特定分组的参数放入"其他参数"分组
        if (!assigned) {
          grouped['其他参数'].push(item);
        }
      });
      
      // 移除空的分组
      Object.keys(grouped).forEach(groupName => {
        if (grouped[groupName].length === 0) {
          delete grouped[groupName];
        }
      });
      
      return grouped;
    }
  },
  async mounted() {
    await this.loadBrands()
    await this.loadCars()
  },
    methods: {
      // 显示车型详情弹窗
      showCarDetails(car) {
        // 确保car对象存在
        if (!car) return;
        
        // 简单复制选中的车辆数据，避免深拷贝可能的问题
        this.selectedCar = {
          id: car.id,
          brand_name: car.brand_name || '',
          model_name: car.model_name || '',
          series_name: car.series_name || '',
          model_price: car.model_price || '',
          energy_type: car.energy_type || '',
          level: car.level || '',
          launch_date: car.launch_date || '',
          manufacturer: car.manufacturer || '',
          config: car.config || null
        };
        
        this.showCarDetail = true;
        // 阻止页面滚动
        document.body.style.overflow = 'hidden';
      },
      
      // 关闭车型详情弹窗
      closeCarDetail() {
        this.showCarDetail = false;
        this.selectedCar = null;
        // 恢复页面滚动
        document.body.style.overflow = '';
        // 确保焦点回到页面上
        setTimeout(() => {
          document.activeElement?.blur();
        }, 10);
      },
      
      // 处理弹窗外部点击事件
      handleModalClick(e) {
        // 检查点击事件是否有效
        if (e && e.target === e.currentTarget) {
          this.closeCarDetail();
        }
      },
    async loadBrands() {
      try {
        const response = await carApiService.getFilterOptions()
        if (response.success) {
          this.brands = response.data
          console.log('获取到的品牌数据:', this.brands) // 调试信息
          // 初始化热门品牌
          this.initPopularBrands()
        }
      } catch (error) {
        console.error('获取品牌列表失败:', error)
      }
    },
    
    // 初始化热门品牌
    initPopularBrands() {
      if (this.brands.length > 0) {
        // 检查热门品牌是否已存在且有有效的brand_id
        const validPopularBrands = this.popularBrands.filter(pb => 
          this.brands.some(b => b.brand_id === pb.brand_id)
        )
        
        // 如果没有有效热门品牌，则从现有品牌中选择前6个
        if (validPopularBrands.length === 0) {
          this.popularBrands = this.brands.slice(0, 6)
        }
      }
    },
    
    async loadCars() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current_page,
          per_page: this.pagination.per_page,
          ...this.filters
        }
        
        // 添加排序参数
        if (this.sortOptions.price) {
          params.sort_by = 'price'
          params.order = this.sortOptions.price
        } else if (this.sortOptions.launch_date) {
          params.sort_by = 'launch_date'
          params.order = this.sortOptions.launch_date
        }
        
        // 清理空值参数
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key]
          }
        })
        
        const response = await carApiService.getCars(params)
        if (response.success) {
          this.cars = response.data.cars
          this.totalCars = response.data.total
          this.pagination.total_pages = response.data.pages
          this.pagination.current_page = response.data.page
        }
      } catch (error) {
        console.error('获取车型列表失败:', error)
        this.cars = []
        this.totalCars = 0
        this.pagination.total_pages = 0
      } finally {
        this.loading = false
        // 确保页码输入框的值在有效范围内
        this.pageInput = Math.min(this.pageInput, this.pagination.total_pages)
      }
    },
    
    handleFilterChange() {
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    handleSearchInput() {
      // 防抖处理，避免频繁请求
      if (this.searchTimeout) {
        clearTimeout(this.searchTimeout)
      }
      this.searchTimeout = setTimeout(() => {
        this.pagination.current_page = 1
        this.loadCars()
      }, 500)
    },
    
    handleSortChange(sortField) {
      // 确保同一时间只有一个排序字段生效
      if (sortField === 'price' && this.sortOptions.price !== '') {
        this.sortOptions.launch_date = ''
      } else if (sortField === 'launch_date' && this.sortOptions.launch_date !== '') {
        this.sortOptions.price = ''
      }
      
      // 重置页码并重新加载数据
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    handlePerPageChange() {
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    goToPage(page) {
      if (page >= 1 && page <= this.pagination.total_pages) {
        this.pagination.current_page = page
        this.pageInput = page // 更新页码输入框的值
        this.loadCars()
      }
    },
    
    jumpToPage() {
      if (this.isValidPage(this.pageInput)) {
        this.goToPage(this.pageInput)
      }
    },
    
    isValidPage(page) {
      return page && typeof page === 'number' && !isNaN(page) && 
             page >= 1 && page <= this.pagination.total_pages
    },
    
    resetFilters() {
      this.filters = {
        keyword: '',
        brand_id: '',
        price_range: '',
        energy_type: '',
        level: '',
        start_date: '',
        end_date: ''
      }
      // 重置排序选项
      this.sortOptions = {
        price: '',
        launch_date: ''
      }
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    applyFilters() {
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    removeFilter(filterKey) {
      if (filterKey === 'keyword') {
        this.filters.keyword = ''
      } else if (filterKey === 'brand_id') {
        this.filters.brand_id = ''
      } else if (filterKey === 'price_range') {
        this.filters.price_range = ''
      } else if (filterKey === 'energy_type') {
        this.filters.energy_type = ''
      } else if (filterKey === 'level') {
        this.filters.level = ''
      } else if (filterKey === 'date') {
        this.filters.start_date = ''
        this.filters.end_date = ''
      }
      this.pagination.current_page = 1
      this.loadCars()
    },
    
    getCarInitial(name) {
      return name ? name.substring(0, 2) : '车型'
    },
    
    // 品牌选择器相关方法
    toggleBrandSelector() {
      if (!this.showBrandSelector) {
        // 保存当前品牌选择，用于在用户取消选择时恢复
        this._tempBrandId = this.filters.brand_id;
        // 重置视觉状态，清除品牌选择
        this.filters.brand_id = '';
        // 重置左侧字母索引状态
        this.activeIndex = 'A';
      }
      
      this.showBrandSelector = !this.showBrandSelector;
      
      if (this.showBrandSelector) {
        this.$nextTick(() => {
          this.initScrollListeners();
          // 滚动到顶部
          if (this.$refs.brandListContainer) {
            this.$refs.brandListContainer.scrollTop = 0;
          }
        });
      } else {
        this.removeScrollListeners();
        // 如果用户没有选择新品牌，恢复之前的选择
        if (!this._selectedBrandDuringSession) {
          this.filters.brand_id = this._tempBrandId;
        }
        // 重置会话标志
        this._selectedBrandDuringSession = false;
      }
    },
    
    closeBrandSelector() {
      this.showBrandSelector = false;
      this.removeScrollListeners();
    },
    
    selectBrand(brand) {
      this.filters.brand_id = brand.brand_id;
      // 标记用户在本次会话中选择了品牌
      this._selectedBrandDuringSession = true;
      // 自动关闭品牌选择器
      this.closeBrandSelector();
      this.handleFilterChange();
    },
    

    
    // 点击左侧字母索引时的滚动处理
    scrollToLetter(letter) {
      // 标记正在通过点击进行滚动，避免触发滚动事件
      this.isProgrammaticScroll = true;
      this.activeIndex = letter;
      
      const element = document.getElementById(`brand-${letter}`);
      const brandListContainer = this.$refs.brandListContainer;
      
      if (element && brandListContainer) {
        // 先计算元素相对于滚动容器的位置
        const rect = element.getBoundingClientRect();
        const containerRect = brandListContainer.getBoundingClientRect();
        
        // 计算滚动位置，考虑容器顶部的偏移，让字母区域显示在容器顶部附近
        // 添加一个小的偏移量(20px)，确保字母标题完全可见
        const scrollPosition = rect.top - containerRect.top + brandListContainer.scrollTop - 20;
        
        // 使用平滑滚动确保准确的定位
        brandListContainer.scrollTo({
          top: scrollPosition,
          behavior: 'smooth'
        });
      }
      
      // 同时滚动左侧索引到当前字母位置
      // 确保元素完全渲染后再执行
      this.$nextTick(() => {
        this.scrollToActiveIndex();
      });
      
      // 重置滚动状态
      setTimeout(() => {
        this.isProgrammaticScroll = false;
      }, 500); // 增加延迟时间，确保滚动动画完成
    },
    
    // 获取中文字符的拼音首字母（简化版）
    getPinyinFirstLetter(char) {
      // 常见中文字符的拼音首字母映射
      const pinyinMap = {
        '阿': 'A', '八': 'B', '擦': 'C', '大': 'D', '额': 'E', '发': 'F', '嘎': 'G',
        '哈': 'H', '一': 'Y', '机': 'J', '卡': 'K', '拉': 'L', '妈': 'M', '拿': 'N',
        '哦': 'O', '趴': 'P', '七': 'Q', '日': 'R', '撒': 'S', '他': 'T', '乌': 'W',
        '西': 'X', '扎': 'Z', '比': 'B', '亚': 'Y', '迪': 'D', '福': 'F', '吉': 'J',
        '克': 'K', '里': 'L', '马': 'M', '尼': 'N', '欧': 'O', '皮': 'P', '奇': 'Q',
        '瑞': 'R', '思': 'S', '特': 'T', '维': 'W', '希': 'X', '子': 'Z', '宝': 'B',
        '长': 'C', '德': 'D', '尔': 'E', '飞': 'F', '高': 'G', '和': 'H', '极': 'J',
        '可': 'K', '乐': 'L', '美': 'M', '诺': 'N', '欧': 'O', '普': 'P', '起': 'Q',
        '荣': 'R', '速': 'S', '腾': 'T', '威': 'W', '星': 'X', '众': 'Z', '奥': 'A',
        '奔': 'B', '驰': 'C', '东': 'D', '风': 'F', '广': 'G', '海': 'H', '江': 'J',
        '开': 'K', '雷': 'L', '名': 'M', '南': 'N', '奇': 'Q', '荣': 'R', '三': 'S',
        '天': 'T', '五': 'W', '小': 'X', '中': 'Z', '北': 'B', '长': 'C', '大': 'D',
        '福': 'F', '国': 'G', '红': 'H', '金': 'J', '凯': 'K', '力': 'L', '明': 'M',
        '牛': 'N', '欧': 'O', '平': 'P', '汽': 'Q', '人': 'R', '上': 'S', '通': 'T',
        '万': 'W', '新': 'X', '正': 'Z', '安': 'A', '保': 'B', '昌': 'C', '东': 'D',
        '二': 'E', '方': 'F', '光': 'G', '华': 'H', '建': 'J', '科': 'K', '联': 'L',
        '民': 'M', '农': 'N', '汽': 'Q', '如': 'R', '山': 'S', '同': 'T', '文': 'W',
        '现': 'X', '中': 'Z', '爱': 'A', '百': 'B', '成': 'C', '达': 'D', '二': 'E',
        '丰': 'F', '公': 'G', '恒': 'H', '佳': 'J', '康': 'K', '利': 'L', '摩': 'M',
        '能': 'N', '汽': 'Q', '日': 'R', '双': 'S', '天': 'T', '我': 'W', '鑫': 'X',
        '重': 'Z',
        // 添加更多品牌名称的拼音映射
        '本': 'B', '田': 'T', '丰': 'F', '拜': 'B', '腾': 'T', '悍': 'H', '马': 'M',
        '日': 'R', '产': 'C', '尼': 'N', '桑': 'S', '德': 'D', '奥': 'A', '迪': 'D',
        '大': 'D', '众': 'Z', '现': 'X', '代': 'D', '起': 'Q', '亚': 'Y', '虎': 'H',
        '标': 'B', '致': 'Z', '雪': 'X', '铁': 'T', '龙': 'L', '自': 'Z', '达': 'D',
        '沃': 'W', '尔': 'E', '雷': 'L', '斯': 'S', '捷': 'J', '克': 'K', '诺': 'N',
        '英': 'Y', '菲': 'F', '利': 'L', '卡': 'K', '法': 'F', '拉': 'L', '玛': 'M',
        '莎': 'S', '阿': 'A', '尔': 'E', '罗': 'L', '密': 'M', '兰': 'L', '柯': 'K',
        '佳': 'J', '蓝': 'L', '鸟': 'N', '讴': 'O', '歌': 'G', '凯': 'K', '迪': 'D',
        '克': 'K', '巴': 'B', '鲁': 'L', '吉': 'J', '利': 'L', '城': 'C', '哈': 'H',
        '弗': 'F', '理': 'L', '想': 'L', '小': 'X', '鹏': 'P', '蔚': 'W', '来': 'L',
        '哪': 'N', '吒': 'Z', '爱': 'A', '驰': 'C', '岚': 'L', '图': 'T', '零': 'L',
        '跑': 'P', '高': 'G', '合': 'H', '创': 'C', '智': 'Z', '己': 'J', '极': 'J',
        '氪': 'K', '埃': 'A', '安': 'A', '赛': 'S', '力': 'L', '鸿': 'H', '蒙': 'M',
        '行': 'X', '豪': 'H', '爵': 'J', '铃': 'L', '木': 'M', '林': 'L', '路': 'L',
        '虎': 'H', '博': 'B', '基': 'J', '尼': 'N', '道': 'D', '奇': 'Q', '萨': 'S',
        '马': 'M', '冈': 'G', '山': 'S', '光': 'G', '什': 'S', '沃': 'W', '格': 'G'
      }
      
      return pinyinMap[char] || char
    },
    
    // 滚动联动相关方法 - 完全重写
    initScrollListeners() {
      // 确保在初始化时清除之前的监听器
      this.removeScrollListeners();
      
      this.$nextTick(() => {
        if (this.$refs.brandListContainer) {
          // 只监听右侧品牌列表的滚动，左侧索引通过点击交互
          this.$refs.brandListContainer.addEventListener('scroll', this.handleBrandListScroll);
        }
      });
    },
    
    removeScrollListeners() {
      if (this.$refs.brandListContainer) {
        this.$refs.brandListContainer.removeEventListener('scroll', this.handleBrandListScroll);
      }
      
      // 清除防抖定时器
      if (this.scrollDebounceTimer) {
        clearTimeout(this.scrollDebounceTimer);
      }
    },
    
    // 处理右侧品牌列表的滚动
    handleBrandListScroll() {
      // 如果是通过代码触发的滚动，不执行联动
      if (this.isProgrammaticScroll) return;
      
      // 防抖处理
      if (this.scrollDebounceTimer) {
        clearTimeout(this.scrollDebounceTimer);
      }
      
      // 使用延时执行以减少计算频率
      this.scrollDebounceTimer = setTimeout(() => {
        this.updateActiveLetter();
      }, 80);
    },
    
    // 更新当前活动字母
    updateActiveLetter() {
      if (!this.$refs.brandListContainer) return;
      
      const container = this.$refs.brandListContainer;
      const scrollTop = container.scrollTop;
      const containerHeight = container.clientHeight;
      
      // 获取所有品牌字母区域
      const sections = this.$el.querySelectorAll('.brand-letter-section');
      if (!sections.length) return;
      
      // 找到当前可视区域内最靠上的字母区域
      let activeLetter = this.brandIndexLetters[0];
      
      for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const sectionTop = section.offsetTop;
        
        // 判断区域是否在可视范围内
        // 使用容器高度的30%作为判定点，更早地切换到下一个字母
        if (sectionTop <= scrollTop + containerHeight * 0.3) {
          activeLetter = section.id.replace('brand-', '');
        } else {
          // 找到了第一个不在可视范围内的区域，退出循环
          break;
        }
      }
      
      // 如果字母发生变化，更新活动状态并滚动左侧索引
      if (activeLetter !== this.activeIndex) {
        this.activeIndex = activeLetter;
        // 滚动左侧索引到活动字母位置
        this.scrollToActiveIndex();
      }
    },
    
    // 滚动左侧索引到当前活动字母
    scrollToActiveIndex() {
      const brandIndex = this.$refs.brandIndex;
      if (!brandIndex) return;
      
      // 直接通过字母定位，而不是依赖active类的选择器
      const targetElement = this.$el.querySelector(`.index-letter:nth-child(${this.brandIndexLetters.indexOf(this.activeIndex) + 1})`);
      if (!targetElement) return;
      
      // 使用getBoundingClientRect获取更精确的位置信息
      const rect = targetElement.getBoundingClientRect();
      const containerRect = brandIndex.getBoundingClientRect();
      
      // 计算居中位置，考虑元素和容器的相对位置
      const containerHeight = brandIndex.offsetHeight;
      const letterHeight = targetElement.offsetHeight;
      
      // 计算准确的滚动位置
      const scrollPosition = rect.top - containerRect.top + brandIndex.scrollTop - (containerHeight / 2) + (letterHeight / 2);
      
      // 使用平滑滚动到计算的位置
      brandIndex.scrollTo({
        top: Math.max(0, scrollPosition),
        behavior: 'smooth'
      });
    },
  }
}
</script>

<style scoped>
.cars {
  min-height: 100vh;
  background: white;
}

/* 顶部筛选区域样式 */
.filter-section {
  background: white;
  padding: 3rem 2rem 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  color: #2E7D32;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-align: center;
}

.page-subtitle {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.filter-panel {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #f0f0f0;
}

/* 搜索框样式 */
.search-row {
  margin-bottom: 2rem;
}

.search-container {
  display: flex;
  justify-content: center;
}

.search-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 1rem;
  background: #f8f9fa;
  transition: all 0.3s ease;
  outline: none;
}

.search-input:focus {
  border-color: #4CAF50;
  background: white;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.15);
}

.search-input:focus + .search-icon {
  opacity: 0.8;
}

.search-input:focus + .search-icon {
  opacity: 0.8;
}

.search-input::placeholder {
  color: #999;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  object-fit: contain;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.filter-select, .date-input {
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  transition: all 0.3s ease;
  outline: none;
  width: 100%;
}

.filter-select:focus, .date-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.price-range, .date-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.range-separator {
  color: #999;
  font-weight: 500;
  min-width: 2rem;
  text-align: center;
}

.filter-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: flex-end;
}

.reset-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.apply-btn {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  background: linear-gradient(135deg, #43A047, #4CAF50);
  transform: translateY(-1px);
}

/* 车辆展示区域样式 */
.cars-section {
  padding: 3rem 2rem;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.results-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.total-count {
  font-size: 1.1rem;
  color: #666;
  font-weight: 600;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-badge {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2E7D32;
  border: 1px solid #c8e6c9;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.remove-filter {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
}

.remove-filter:hover {
  color: #f44336;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.per-page-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.per-page-selector label {
  color: #666;
  font-size: 0.9rem;
}

.per-page-select {
  padding: 0.4rem 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* 排序控件样式 */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
}

.sort-select {
  padding: 0.4rem 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.sort-select:hover {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

.sort-select:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.loading-container {
  text-align: center;
  padding: 4rem;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f4f8;
  border-top: 4px solid #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1.5rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 表格布局样式 */
.cars-list {
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.table-header {
  background: linear-gradient(135deg, #f8f9fa, #f0f4f8);
  border-bottom: 1px solid #e0e0e0;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem 1.5rem;
  align-items: center;
}

.header-row {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.data-row {
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s ease;
}

.data-row:hover {
  background-color: #f8f9fa;
}

.data-row:last-child {
  border-bottom: none;
}

.table-cell {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #333;
}

.brand-cell {
  font-weight: 600;
  color: #2E7D32;
}

.model-cell {
  font-weight: 500;
}

.series-cell {
  color: #666;
}

.price-cell .price {
  color: #ff5722;
  font-weight: 600;
}

.price-cell .price-unknown {
  color: #999;
  font-style: italic;
}

.energy-cell {
  color: #1565c0;
}

.level-cell {
  color: #7b1fa2;
}

.date-cell .launch-date {
  color: #666;
}

.date-cell .date-unknown {
  color: #999;
  font-style: italic;
}

.no-data {
  text-align: center;
  padding: 4rem 2rem;
  color: #999;
}

.no-data-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-data h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #666;
}

/* 分页样式 */
.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-btn {
  padding: 0.7rem 1.2rem;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #4CAF50;
  color: #4CAF50;
}

/* 页码跳转部分样式 */
.page-jump {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 2rem;
}

.page-info {
  color: #666;
  font-size: 0.9rem;
}

.page-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-input {
  width: 80px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.3s ease;
}

.page-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.jump-btn {
  padding: 0.7rem 1.2rem;
  background-color: #2E7D32;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.jump-btn:hover:not(:disabled) {
  background-color: #4CAF50;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.jump-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.page-btn {
  padding: 0.7rem 1rem;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 45px;
  font-weight: 500;
}

.page-btn:hover {
  border-color: #4CAF50;
  color: #4CAF50;
}

.page-btn.active {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  border-color: #4CAF50;
}

.ellipsis {
  padding: 0.7rem 0.5rem;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .table-row {
    grid-template-columns: 1fr 1.2fr 1.2fr 0.8fr 0.8fr 0.8fr 0.8fr;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
  }
  
  .table-cell {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .filter-section {
    padding: 2rem 1rem 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .filter-panel {
    padding: 1.5rem;
  }
  
  .search-input-wrapper {
    max-width: 100%;
  }
  
  .search-input {
    padding: 0.8rem 0.8rem 0.8rem 2.5rem;
    font-size: 0.9rem;
  }
  
  .search-icon {
    left: 0.8rem;
    width: 18px;
    height: 18px;
  }
  
  .filter-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* 车型详情弹窗样式 */
.car-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.car-detail-content {
  background: white;
  border-radius: 15px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.car-detail-header {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  color: white;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #43A047;
}

.car-title-container {
  flex: 1;
}

.car-brand {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}

.car-model {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  opacity: 0.95;
}

.car-series {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0;
}

.close-modal-btn {
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-modal-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.car-detail-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}

.detail-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.detail-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2E7D32;
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #c8e6c9;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: white;
  border-radius: 8px;
  border-left: 3px solid #4CAF50;
}

.info-label {
  font-weight: 600;
  color: #666;
  font-size: 0.9rem;
}

.info-value {
  font-weight: 500;
  color: #333;
  font-size: 0.95rem;
}

.info-value.price {
  color: #ff5722;
  font-weight: 600;
  font-size: 1rem;
}

.config-content {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e0e0e0;
}

.config-section {
  margin-bottom: 1.5rem;
}

.config-section:last-child {
  margin-bottom: 0;
}

.config-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2E7D32;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
  transition: all 0.2s ease;
}

.config-item:hover {
  background: #f0f4f8;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.config-label {
  font-weight: 500;
  color: #555;
  font-size: 0.9rem;
  flex: 1;
}

.config-value {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
  text-align: right;
  margin-left: 1rem;
}

.config-data pre {
  margin: 0;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333;
}

.no-config {
  text-align: center;
  padding: 2rem;
  color: #999;
}

/* 弹窗底部样式 */
.car-detail-footer {
  padding: 1.5rem 2rem;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}

.close-detail-btn {
  background: #2E7D32;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-detail-btn:hover {
  background: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* .close-btn 样式已移除 */

/* 响应式弹窗样式 */
@media (max-width: 768px) {
  .car-detail-modal {
    padding: 0.5rem;
  }
  
  .car-detail-content {
    max-height: 95vh;
  }
  
  .car-detail-header {
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .close-modal-btn {
    align-self: flex-end;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  
  .car-detail-body {
    padding: 1.5rem;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .config-grid {
    grid-template-columns: 1fr;
  }
  
  .config-item {
    padding: 0.6rem 0.8rem;
  }
  
  .config-label {
    font-size: 0.85rem;
  }
  
  .config-value {
    font-size: 0.9rem;
  }
  
  /* 弹窗底部样式 */
  .car-detail-footer {
    padding: 1rem 1.5rem;
  }
  
  .close-detail-btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }
  
  /* .close-btn 样式已移除 */
}

@media (max-width: 480px) {
  .filter-actions {
    justify-content: center;
    margin-top: 1rem;
  }
  
  .price-range, .date-range {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .range-separator {
    display: none;
  }
  
  .cars-section {
    padding: 2rem 1rem;
  }
  
  .results-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .sort-controls {
    justify-content: center;
    gap: 1rem;
  }
  
  .sort-group {
    gap: 0.3rem;
  }
  
  .sort-select {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
  
  .table-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.8rem;
  }
  
  .table-cell {
    padding: 0.3rem 0;
    font-size: 0.8rem;
  }
  
  .table-header {
    display: none;
  }
  
  .data-row {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .table-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }
  
  .table-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .page-numbers {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .page-jump {
    order: 1;
    flex-direction: column;
    margin-left: 0;
    width: 100%;
    justify-content: center;
    gap: 0.8rem;
  }
  
  .page-input-group {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .filter-section {
    padding: 1.5rem 0.5rem 1rem;
  }
  
  .filter-panel {
    padding: 1rem;
  }
  
  .cars-section {
    padding: 1.5rem 0.5rem;
  }
  
  .data-row {
    padding: 0.8rem;
  }
  
  .pagination-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  
  .page-btn {
    padding: 0.6rem 0.8rem;
    min-width: 40px;
    font-size: 0.9rem;
  }
}

/* 品牌选择器样式 */
.brand-filter-item {
  position: relative;
}

.brand-selector-wrapper {
  position: relative;
}

.brand-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.brand-selector:hover {
  border-color: #2E7D32;
}

.selected-brand {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.dropdown-arrow {
  color: #666;
  transition: transform 0.3s ease;
}

/* 品牌选择弹窗 - 功能完善与设计优化 */
.brand-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.brand-selector-content {
  background: #ffffff;
  border-radius: 12px;
  width: 90%;
  max-width: 850px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 优化头部 */
.brand-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  position: relative;
  z-index: 1;
}

.header-title {
  margin: 0;
  color: #333;
  font-size: 1.3rem;
  font-weight: 600;
}



/* 主体内容区域 - 左右分栏布局 */
.brand-selector-body {
  display: flex;
  flex: 1;
  min-height: 400px;
  background: #ffffff;
}

/* 左侧字母索引导航 */
.brand-index {
  width: 55px;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  overflow-y: auto;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f8f9fa;
}

/* 确保左侧索引滚动条可见 */
.brand-index::-webkit-scrollbar {
  width: 4px;
}

.brand-index::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.brand-index::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

.brand-index::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 字母索引项 */
.index-letter {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.index-letter:hover {
  background: #e9ecef;
  color: #4CAF50;
  transform: scale(1.05);
}

.index-letter.active {
  background: #4CAF50;
  color: white;
  font-weight: 600;
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
}

/* 右侧品牌列表 */
.brand-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

/* 确保右侧列表滚动条可见 */
.brand-list-container::-webkit-scrollbar {
  width: 8px;
}

.brand-list-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.brand-list-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.brand-list-container::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 品牌区块 */
  .brand-letter-section {
    margin-bottom: 2.5rem;
  }
  
  /* 标题样式 */
.section-title,
.letter-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



/* 品牌网格 */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.85rem;
}

/* 品牌项 - 优化视觉效果 */
.brand-item {
  padding: 0.9rem 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 0.95rem;
  font-weight: 500;
  background: white;
  position: relative;
  overflow: hidden;
}

.brand-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent);
  transition: left 0.5s ease;
}

.brand-item:hover::before {
  left: 100%;
}

.brand-item:hover {
  border-color: #4CAF50;
  background: #f8fff8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.brand-item.active {
  border-color: #4CAF50;
  background: #4CAF50;
  color: white;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
}

/* 底部操作区域 - 优化设计 */
.brand-selector-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.selected-info {
  font-size: 0.9rem;
  color: #666;
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.selected-info strong {
  color: #4CAF50;
  font-weight: 600;
  margin-left: 0.3rem;
}

.actions {
  display: flex;
  gap: 1rem;
}

.clear-btn, .confirm-btn {
  padding: 0.8rem 1.75rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-size: 0.9rem;
  min-width: 110px;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
}

.clear-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.confirm-btn {
  background: #4CAF50;
  color: white;
}

.confirm-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* 响应式设计 - 优化移动端体验 */
@media (max-width: 768px) {
  .brand-selector-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .brand-selector-header,
  .brand-selector-footer {
    padding: 1rem;
  }
  
  /* 移动端调整为上下布局 */
  .brand-selector-body {
    flex-direction: column;
  }
  
  .brand-index {
    width: 100%;
    height: 50px;
    flex-direction: row;
    padding: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  
  .index-letter {
    margin: 0 3px;
    flex-shrink: 0;
  }
  
  .brand-list-container {
    padding: 1rem;
  }
  
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.7rem;
  }
  
  .brand-item {
    padding: 0.75rem 0.6rem;
    font-size: 0.9rem;
  }
  
  .brand-selector-footer {
    flex-direction: column;
    gap: 1rem;
  }
  
  .selected-info {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
  }
  
  .actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .clear-btn,
  .confirm-btn {
    flex: 1;
    padding: 0.85rem;
    min-width: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brand-selector-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .brand-selector-body {
    flex-direction: column;
  }
  
  .brand-index {
    width: 100%;
    height: 60px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }
  
  .index-letter {
    margin: 0 0.2rem;
    min-width: 35px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  
  .brand-item {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* 品牌选择器样式 */
.brand-filter-item {
  position: relative;
}

.brand-selector-wrapper {
  position: relative;
}

.brand-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.brand-selector:hover {
  border-color: #2E7D32;
}

.selected-brand {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.dropdown-arrow {
  color: #666;
  transition: transform 0.3s ease;
}

.brand-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.brand-selector-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.brand-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.brand-selector-header h3 {
  margin: 0;
  color: #2E7D32;
  font-size: 1.5rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: #f5f5f5;
}

.brand-selector-body {
  display: flex;
  flex: 1;
  min-height: 400px;
}

.brand-index {
  width: 60px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  overflow-y: auto;
}

.index-letter {
  padding: 0.5rem;
  margin: 0.2rem 0;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  min-width: 30px;
  text-align: center;
}

.index-letter:hover {
  background: #e3f2fd;
  color: #1976d2;
}

.index-letter.active {
  background: #2E7D32;
  color: white;
}

.brand-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.brand-letter-section {
  margin-bottom: 2rem;
}

.letter-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2E7D32;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
}

.brand-item {
  padding: 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  font-weight: 500;
  background: white;
}

.brand-item:hover {
  border-color: #2E7D32;
  background: #f1f8e9;
  transform: translateY(-2px);
}

.brand-item.active {
  border-color: #2E7D32;
  background: #2E7D32;
  color: white;
}

.brand-selector-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  border-radius: 0 0 15px 15px;
}

.clear-btn, .confirm-btn {
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
}

.clear-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  background: #2E7D32;
  color: white;
}

.confirm-btn:hover {
  background: #1b5e20;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brand-selector-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .brand-selector-body {
    flex-direction: column;
  }
  
  .brand-index {
    width: 100%;
    height: 60px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }
  
  .index-letter {
    margin: 0 0.2rem;
    min-width: 35px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  
  .brand-item {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* 品牌选择器样式 */
.brand-filter-item {
  position: relative;
}

.brand-selector-wrapper {
  position: relative;
}

.brand-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.brand-selector:hover {
  border-color: #2E7D32;
}

.selected-brand {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.dropdown-arrow {
  color: #666;
  transition: transform 0.3s ease;
}

.brand-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.brand-selector-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.brand-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.brand-selector-header h3 {
  margin: 0;
  color: #2E7D32;
  font-size: 1.5rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: #f5f5f5;
}

.brand-selector-body {
  display: flex;
  flex: 1;
  min-height: 400px;
}

.brand-index {
  width: 60px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  overflow-y: auto;
}

.index-letter {
  padding: 0.5rem;
  margin: 0.2rem 0;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  min-width: 30px;
  text-align: center;
}

.index-letter:hover {
  background: #e3f2fd;
  color: #1976d2;
}

.index-letter.active {
  background: #2E7D32;
  color: white;
}

.brand-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.brand-letter-section {
  margin-bottom: 2rem;
}

.letter-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2E7D32;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
}

.brand-item {
  padding: 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  font-weight: 500;
  background: white;
}

.brand-item:hover {
  border-color: #2E7D32;
  background: #f1f8e9;
  transform: translateY(-2px);
}

.brand-item.active {
  border-color: #2E7D32;
  background: #2E7D32;
  color: white;
}

.brand-selector-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  border-radius: 0 0 15px 15px;
}

.clear-btn, .confirm-btn {
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
}

.clear-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  background: #2E7D32;
  color: white;
}

.confirm-btn:hover {
  background: #1b5e20;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brand-selector-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .brand-selector-body {
    flex-direction: column;
  }
  
  .brand-index {
    width: 100%;
    height: 60px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }
  
  .index-letter {
    margin: 0 0.2rem;
    min-width: 35px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  
  .brand-item {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* 品牌选择器样式 */
.brand-filter-item {
  position: relative;
}

.brand-selector-wrapper {
  position: relative;
}

.brand-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.brand-selector:hover {
  border-color: #2E7D32;
}

.selected-brand {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.dropdown-arrow {
  color: #666;
  transition: transform 0.3s ease;
}

.brand-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.brand-selector-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.brand-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.brand-selector-header h3 {
  margin: 0;
  color: #2E7D32;
  font-size: 1.5rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: #f5f5f5;
}

.brand-selector-body {
  display: flex;
  flex: 1;
  min-height: 400px;
}

.brand-index {
  width: 60px;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  overflow-y: auto;
}

.index-letter {
  padding: 0.5rem;
  margin: 0.2rem 0;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  min-width: 30px;
  text-align: center;
}

.index-letter:hover {
  background: #e3f2fd;
  color: #1976d2;
}

.index-letter.active {
  background: #2E7D32;
  color: white;
}

.brand-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.brand-letter-section {
  margin-bottom: 2rem;
}

.letter-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2E7D32;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
}

.brand-item {
  padding: 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  font-weight: 500;
  background: white;
}

.brand-item:hover {
  border-color: #2E7D32;
  background: #f1f8e9;
  transform: translateY(-2px);
}

.brand-item.active {
  border-color: #2E7D32;
  background: #2E7D32;
  color: white;
}

.brand-selector-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
  border-radius: 0 0 15px 15px;
}

.clear-btn, .confirm-btn {
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-btn {
  background: #f5f5f5;
  color: #666;
}

.clear-btn:hover {
  background: #e0e0e0;
}

.confirm-btn {
  background: #2E7D32;
  color: white;
}

.confirm-btn:hover {
  background: #1b5e20;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brand-selector-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .brand-selector-body {
    flex-direction: column;
  }
  
  .brand-index {
    width: 100%;
    height: 60px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }
  
  .index-letter {
    margin: 0 0.2rem;
    min-width: 35px;
  }
  
  .brand-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  
  .brand-item {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}
</style>